<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="css/bootstrap.css" rel="stylesheet">
    <style>

        #header{
            background-image:url("image/bannerbg.png");
            height: 580px;
        }




        #section{



        }

        #footer{
            height: 120px;
            background-color: #3c3c3c;

        }
        #right{
            background-color:#f3f3f3;
        }

    </style>
</head>
<body>

<header id="header">
    <nav class="navbar-inverse">
        <div class="container-fluid">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header col-md-2">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">

                </button>

                <span class="navbar-right"> <img src="image/footer_logo.png"></span>
            </div>

            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav col-md-5">
                    <li ><a href="#">全国</a></li>
                    <li ><a href="#">电影</a></li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">演出 <span class="caret"></span></a>
                        <ul class="dropdown-menu">
                            <li><a href="#">Action</a></li>
                            <li><a href="#">Another action</a></li>
                            <li><a href="#">Something else here</a></li>
                            <li role="separator" class="divider"></li>
                            <li><a href="#">Separated link</a></li>
                            <li role="separator" class="divider"></li>
                            <li><a href="#">One more separated link</a></li>
                        </ul>
                    </li>
                    <li ><a href="#">我的微票儿</a></li>
                    <li ><a href="#" style="color: #ac2925">new</a></li>
                </ul>
                <div class="col-md-3">
                    <form class="navbar-form navbar-right row">
                        <div class="input-group">
                            <input type="text" class="form-control" placeholder="请输入查询内容">
                            <span class="input-group-btn">
                             <button class="btn btn-default" type="button">搜索</button>
                         </span>
                        </div>
                    </form>
                </div>
                <div class="col-md-2" >
                    <ul class="nav navbar-nav navbar-left">
                        <li><a href="#">登陆</a></li>
                        <li><a href="#">注册</a></li>
                    </ul>
                    </li>
                    </ul>
                </div>
            </div><!-- /.navbar-collapse -->
        </div><!-- /.container-fluid -->
    </nav>

    <div id="eom" style="padding-top: 65px; ">
        <div class="row">
            <div class="col-md-7 ">
                <div id='MySlide' class='carousel slide navbar-right' data-ride="carousel">
                    <ol class='carousel-indicators'>
                        <li data-target="#MySlide" data-slide-to="0" class="active"/>
                        <li data-target="#MySlide" data-slide-to="1" class=""/>
                        <li data-target="#MySlide" data-slide-to="2" class=""/>
                        <li data-target="#MySlide" data-slide-to="3" class=""/>
                    </ol>

                    <!-- Carousel items -->
                    <div class='carousel-inner'>
                        <div class='active item'>
                            <img src="image/1.jpg" alt='slide 1'/>
                            <div class="carousel-caption">

                            </div>
                        </div>
                        <div class='item'>
                            <img src="image/2.jpg" alt='slide 2' />
                            <div class="carousel-caption">

                            </div>
                        </div>
                        <div class='item'>
                            <img src="image/3.jpg" alt='slide 3'/>
                            <div class="carousel-caption">
                            </div>
                        </div>
                        <div class='item'>
                            <img src="image/4.jpg" alt='slide 4'/>
                            <div class="carousel-caption">
                            </div>
                        </div>
                    </div>

                    <!-- Carousel nav -->
                    <a class='carousel-control left' href='#MySlide' data-slide='prev'><span class="glyphicon glyphicon-chevron-left"></span></a>
                    <a class='carousel-control right' href='#MySlide' data-slide='next'><span class="glyphicon glyphicon-chevron-right"></span></a>
                </div>
            </div>
            <div class="col-md-4 col-md-offset-1" >
                <div id="right" class="col-md-8 navbar-right">


                    <ul style="list-style: none">
                        <li><h3>特惠看</h3></li>
                        <li><img src="image/img1.jpg"></li>
                        <hr>
                        <li>[苏州]2016迷笛电子音乐节(预售)</li>

                        <li>穿着花裤子喝着小酒通宵达旦</li>
                        <hr>
                        <li>2016刘若英世界巡回演唱会</li>

                        <li>[上海]百老汇经典音乐剧--《狮子王》</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <div>
    </div>
</header>

<section id="section">

    <div class="row">
        <div class="col-sm-offset-1">
            <div class="col-md-2">
                <div class="thumbnail">
                    <img src="image/5.jpg">
                    <div class="caption">
                        <p>[上海]百老汇经典音乐剧《狮子王》</p>
                    </div>
                </div>
            </div>

            <div class="col-md-2">
                <div class="thumbnail">
                    <img src="image/6.jpg">
                    <div class="caption">
                        <p>[上海]百老汇经典音乐剧《狮子王》</p>
                    </div>
                </div>
            </div>

            <div class="col-md-2">
                <div class="thumbnail">
                    <img src="image/7.jpg">
                    <div class="caption">
                        <p>[北京]陈奕迅 ANOTHER EASON'S LIFE演唱会北京站</p>
                    </div>
                </div>
            </div>

            <div class="col-md-2">
                <div class="thumbnail">
                    <img src="image/8.jpg">
                    <div class="caption">
                        <p>[深圳]逃跑计划2016巡回演唱会深圳站</p>
                    </div>
                </div>
            </div>
        </div>

        </div>
    </div>


    <div class="row">
        <div class="col-md-8 col-sm-offset-1">
            <ul class="nav nav-tabs">
                <li role="presentation" class="active"><a href="#">演唱会</a></li>
                <li role="presentation"><a href="#">体育赛事</a></li>
                <li role="presentation"><a href="#">舞台剧</a></li>
                <li role="presentation"><a href="#">儿童亲子</a></li>
                <li role="presentation"><a href="#">演唱会</a></li>
                <li role="presentation"><a href="#">展览活动</a></li>
            </ul>
            <div class="tab-content">
            <div class="tab-pane fade in active">
            <div class="col-md-3">
                <div class="thumbnail">
                    <img src="image/9.jpg">
                    <div class="caption">
                        <p>[上海]百老汇经典音乐剧《狮子王》</p>

                    </div>
                </div>
            </div>

            <div class="col-md-3">
                <div class="thumbnail">
                    <img src="image/10.jpg">
                    <div class="caption">
                        <p>[上海]百老汇经典音乐剧《狮子王》</p>
                    </div>
                </div>
            </div>

            <div class="col-md-3">
                <div class="thumbnail">
                    <img src="image/6.jpg">
                    <div class="caption">
                        <p>[北京]陈奕迅 ANOTHER EASON'S LIFE演唱会北京站</p>
                    </div>
                </div>
            </div>

            <div class="col-md-3">
                <div class="thumbnail">
                    <img src="image/12.jpg">
                    <div class="caption">
                        <p>[深圳]逃跑计划2016巡回演唱会深圳站</p>
                    </div>
                </div>
            </div>

            <div class="col-md-3">
                <div class="thumbnail">
                    <img src="image/9.jpg">
                    <div class="caption">
                        <p>[上海]百老汇经典音乐剧《狮子王》</p>

                    </div>
                </div>
            </div>

            <div class="col-md-3">
                <div class="thumbnail">
                    <img src="image/10.jpg">
                    <div class="caption">
                        <p>[上海]百老汇经典音乐剧《狮子王》</p>
                    </div>
                </div>
            </div>

            <div class="col-md-3">
                <div class="thumbnail">
                    <img src="image/6.jpg">
                    <div class="caption">
                        <p>[北京]陈奕迅 ANOTHER EASON'S LIFE演唱会北京站</p>
                    </div>
                </div>
            </div>

            <div class="col-md-3">
                <div class="thumbnail">
                    <img src="image/12.jpg">
                    <div class="caption">
                        <p>[深圳]逃跑计划2016巡回演唱会深圳站</p>
                    </div>
                </div>
            </div>
        </div>
        </div>
        </div>
        <div class="col-md-2">
            <ul style="list-style: none">
                <br>
                <li style="background-color: #9acfea;"><span>历历在目</span>-<span>尽享每天不一样的精彩</span></li>

                <li>穿着花裤子喝着小酒通宵达旦</li>

                <li>2016刘若英世界巡回演唱会</li>

                <li>[上海]百老汇经典音乐剧--《狮子王》</li>
                <li>[苏州]2016迷笛电子音乐节(预售)</li>

                <li>穿着花裤子喝着小酒通宵达旦</li>
                <hr>
                <li>2016刘若英世界巡回演唱会</li>

                <li>[上海]百老汇经典音乐剧--《狮子王》</li>
                <li>[苏州]2016迷笛电子音乐节(预售)</li>

                <li>穿着花裤子喝着小酒通宵达旦</li>
                <hr>
                <li>2016刘若英世界巡回演唱会</li>

                <li>[上海]百老汇经典音乐剧--《狮子王》</li>
                <li>[苏州]2016迷笛电子音乐节(预售)</li>

                <li>穿着花裤子喝着小酒通宵达旦</li>
                <hr>
                <li>2016刘若英世界巡回演唱会</li>

                <li>[上海]百老汇经典音乐剧--《狮子王》</li>
                <li>[苏州]2016迷笛电子音乐节(预售)</li>

                <li>穿着花裤子喝着小酒通宵达旦</li>
                <hr>
                <li>2016刘若英世界巡回演唱会</li>

                <li>[上海]百老汇经典音乐剧--《狮子王》</li>
            </ul>
        </div>


    </div>

    <div class="row">
        <div class="col-md-8 col-sm-offset-1">
            <h2>场馆推荐</h2>
            <div class="tab-content">
                <div class="tab-pane fade in active">
                    <div class="col-md-6">
                        <div class="thumbnail">
                            <img src="image/img7.jpg">
                            <div class="caption">
                                <p>[上海]百老汇经典音乐剧《狮子王》</p>

                            </div>
                        </div>
                    </div>

                    <div class="col-md-6">
                        <div class="thumbnail">
                            <img src="image/img8.jpg">
                            <div class="caption">
                                <p>[上海]百老汇经典音乐剧《狮子王》</p>
                            </div>
                        </div>
                    </div>


                </div>
            </div>
        </div>


    </div>



</section>

<footer id="footer">



</footer>
</body>
<script src="js/jquery-1.12.4.js"></script>
<script src="js/bootstrap.js"></script>
<script>
    $('#carousel-example-generic').affix({
        offset: {
            top: 100,
            bottom: function () {
                return (this.bottom = $('.footer').outerHeight(true))
            }
        }
    })

    $('.carousel').carousel({
        interval: 2000
    })

</script>
</html>